<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>商品列表</title>
	<#include "./common/header.ftl">
<body>
<div class="content-wrapper" style="display: flex">
    <div class="nav-wrapper" style="flex: 0 0 200px;width: 200px">
				<#include "./common/nav.ftl">
    </div>
    <div id="page-content-wrapper" style="flex: 1;margin-left: 20px;margin-top: 100px">
        <div class="col-md-12 column">
            <div style="display: inline-block;">
                <form action="/sell/admin/productlistbyid?openid=${openid}" method="post"
                      style="float: left;display: inline-block; vertical-align: top;">
                    <input type="text" placeholder="请输入查询id" id="id" name="id" value="" class="btn btn-default">
                    <select id="sortCode" name="sortCode" class="btn btn-default">
                        <option value="2">按时间降序</option>
                        <option value="0">按id升序</option>
                        <option value="1">按类别升序</option>
                    </select>
                    <input type="submit" value="查询" id="selectById" class="btn btn-default">
                </form>
            </div>
            <div style="display: inline-block; float: right;">
                <form action="/sell/admin/productlistbytime?openid=${openid}" method="post"
                      style="display: inline-block;margin-left: 10px; vertical-align: top;">
							<#if createTime??>
								起始时间：<input type="date" id="createTime" name="createTime" value=${createTime} class="btn
                                            btn-default">
                            <#else>
									起始时间：<input type="date" id="createTime" name="createTime" value=""
                                                class="btn btn-default">
                            </#if>
							<#if endTime??>
								截止时间：<input type="date" id="endTime" name="endTime" value=${endTime} class="btn
                                            btn-default">
                            <#else>
									截止时间：<input type="date" id="endTime" name="endTime" value=""
                                                class="btn btn-default">
                            </#if>
                    <input type="submit" value="查询" class="btn btn-default">
                </form>
            </div>
            <div style="clear: both;"></div>
            <input type="button" value="点击增加商品" id="addProduct" style="margin-top: 20px;" class="btn btn-default"/>
            <table class="table" table-bordered style="margin-top: 20px">
                <tr>
                    <td>商品id</td>
                    <td>名称</td>
                    <td>单价</td>
                    <td>库存</td>
                    <td>描述</td>
                    <td>图片</td>
                    <td>类目</td>
                    <td>创建时间</td>
                    <td>修改时间</td>
                    <td colspan="2">操作</td>
                </tr>

						<#list page.content as productinfo>
							<tr>
                                <td>${productinfo.id}</td>
                                <td>${productinfo.productName}</td>
                                <td>${productinfo.productPrice}</td>
                                <td>${productinfo.productStock}</td>
                                <td style="width: 200px">${productinfo.productDescription}</td>
                                <td><img width="100px" height="100px"
                                         src="/sell/static/images/${productinfo.productIcon}.jpg" alt=""/></td>
                                <td>${productinfo.categoryType}</td>
                                <td>${productinfo.createTime}</td>
                                <td>${productinfo.updateTime}</td>
                                <td><a class="deleteProduct">删除</a></td>
                                <td><a class="modifyProduct">修改</a></td>
                            </tr>
                        </#list>
            </table>
            <ul class="pagination pull-right">
						<#if currentPage lt 1>
							<li class="disabled"><a href="#">上一页</a></li>
                        <#else>
								<li><a href="?page=${currentPage}&size=${size}&openid=${openid}">上一页</a></li>
                        </#if>
						<#if page.getTotalPages()<1>
                            <#list 1.. as index>
                                <#if currentPage+1==index>
									<li class="disabled"><a href="#">${index}</a></li>
                                <#else>
										<li><a href="?page=${index}&size=${size}&openid=${openid}">${index}</a></li>
                                </#if>
                            </#list>
                        <#else>
                            <#list 1..page.getTotalPages() as index>
                                <#if currentPage+1==index>
										<li class="disabled"><a href="#">${index}</a></li>
                                <#else>
											<li><a href="?page=${index}&size=${size}&openid=${openid}">${index}</a></li>
                                </#if>
                            </#list>
                        </#if>

						<#if currentPage+1 gte page.getTotalPages()>
							<li class="disabled"><a href="#">下一页</a></li>
                        <#else>
								<li><a href="?page=${currentPage + 2}&size=${size}&openid=${openid}">下一页</a></li>
                        </#if>
            </ul>
        </div>
    </div>
</div>
<div id="modal-container" class="modal" style="display: none">
    <div class="modal-dialog" id="productDialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">商品信息编辑</h4>
            </div>
            <div class="modal-body" style="padding: 50px 50px">
                <form id="formProduct" class="bs-example bs-example-form" role="form">
                    <input id="productId" name="id" style="display: none" value="" class="form-control"><br>
                    <div class="input-group">
                        <span class="input-group-addon">名称：</span>
                        <input id="productName" name="productName" type="text" value="" placeholder="请输入类型名称"
                               class="form-control">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">单价：</span>
                        <input id="productPrice" name="productPrice" type="text" value="" placeholder="请输入单价(数字)"
                               class="form-control" onblur="check(this.value);">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">库存：</span>
                        <input id="productStock" name="productStock" type="text" value="" placeholder="请输入库存(数字)"
                               class="form-control" onkeyup="value=value.replace(/[^1234567890-]+/g,'')">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">描述：</span>
                        <input id="productDescription" name="productDescription" type="text" value=""
                               placeholder="请输入商品描述" class="form-control">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon"> 图片：</span>
                        <img src="" id="productImg" width="40px" height="40px" style="display: none"/>
                        <input type="file" name="image" id="upImage" class="form-control"><br>
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">类目：</span>
                        <select id="categoryType" name="categoryType" class="form-control">
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="close">关闭</button>
                <button type="button" class="btn btn-primary" id="commit">提交更改</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        setCode();
    });
    setCode = function () {
        var sortCodeValue = "${sortCode}";
        console.log("sortCodeValue" + sortCodeValue);
        if (sortCodeValue == 1) {
            $("#sortCode").find("option[value='1']").attr("selected", true);
        } else if (sortCodeValue == 2 || sortCodeValue == null) {
            $("#sortCode").find("option[value='2']").attr("selected", true);
        } else if (sortCodeValue == 0) {
            $("#sortCode").find("option[value='0']").attr("selected", true);
        }
    };
    $(".modifyProduct").click(function () {
        var id = $(this).parent('td').parent('tr').children('td').eq(0).text();
        var productName = $(this).parent('td').parent('tr').children('td').eq(1).text();
        var productPrice = $(this).parent('td').parent('tr').children('td').eq(2).text();
        var productStock = $(this).parent('td').parent('tr').children('td').eq(3).text();
        var productDescription = $(this).parent('td').parent('tr').children('td').eq(4).text();
        var categoryType = $(this).parent('td').parent('tr').children('td').eq(6).text();
        var priductimgTmp = $(this).parent('td').parent('tr').children('td').eq(5).find("img")[0].src;
        $.post("/sell/admin/getcategorylist?openid=${openid}", function (data) {
            console.log(data);
            if (data.mcode == 1) {
                var categoryDiv = document.getElementById("categoryType");
                for (var i = 0; i < data.data.length; i++) {
                    var _option = document.createElement("option");
                    console.log(data.data[i].categoryType);
                    _option.value = data.data[i].categoryType;
                    _option.text = data.data[i].categoryName;
                    categoryDiv.appendChild(_option);
                }
            } else {
                console.log("失败");
            }
        });
        var productImg = document.getElementById("productImg");
        productImg.setAttribute('style', 'display:block');
        productImg.src = priductimgTmp;
        var modifyClass = document.getElementById('modal-container');
        modifyClass.setAttribute('style', 'display:block');
        var idClass = document.getElementById('productId');
        var nameClass = document.getElementById('productName');
        var priceClass = document.getElementById('productPrice');
        var stockClass = document.getElementById("productStock");
        var descriptionClass = document.getElementById("productDescription");
        var typeClass = document.getElementById("categoryType");
        console.log(id);
        idClass.value = id;
        nameClass.value = productName;
        typeClass.value = categoryType;
        priceClass.value = productPrice;
        stockClass.value = productStock;
        descriptionClass.value = productDescription;
    });
    $(".deleteProduct").click(function () {
        var id = $(this).parent('td').parent('tr').children('td').eq(0).text();
        var r = confirm("确认删除？");
        if (r == true) {
            $.post("/sell/admin/productdelete?openid=${openid}", {
                "id": id
            }, function (data) {
                var tmp = $.parseJSON(data);
                if (tmp.msg === 1) {
                    alert("删除成功!");
                } else {
                    alert("删除失败!");
                }
                window.location.reload();
            });
        }
    });
    $("#addProduct").click(function () {
        $.post("/sell/admin/getcategorylist?openid=${openid}", function (data) {
            console.log(data);
            if (data.mcode == 1) {
                var categoryDiv = document.getElementById("categoryType");
                for (var i = 0; i < data.data.length; i++) {
                    var _option = document.createElement("option");
                    console.log(data.data[i].categoryType);
                    _option.value = data.data[i].categoryType;
                    _option.text = data.data[i].categoryName;
                    categoryDiv.appendChild(_option);
                }
            } else {
                console.log("失败");
            }
        });
        console.log();
        var modifyClass = document.getElementById('modal-container');
        modifyClass.setAttribute('style', 'display:block');
    });
    $("#close").click(function () {
        var modifyClass = document.getElementById('modal-container');
        modifyClass.setAttribute('style', 'display:none');
    });
    $("#commit").click(function () {
        var form = new FormData(document.getElementById("formProduct"));
        //获取模态框里的值
        var nameClass = document.getElementById('productName');
        var priceClass = document.getElementById('productPrice');
        var stockClass = document.getElementById("productStock");
        var descriptionClass = document.getElementById("productDescription");
        var upImageClass = document.getElementById("upImage");
        var typeClass = document.getElementById("categoryType");
        if (nameClass.value == '') {
            alert("商品名称不能为空");
        } else if (priceClass.value == '') {
            alert("商品价格不能为空");
        } else if (stockClass.value == '') {
            alert("商品库存不能为空");
        } else if (descriptionClass.value == '') {
            alert("商品描述不能为空");
        } else if (upImageClass.value == '') {
            alert("商品图片不能为空，请点击选择商品图片");
        } else if (typeClass.value == '') {
            alert("商品类别不能为空，请点击选择商品类别");
        } else {
            $.ajax({
                url: "/sell/admin/productadd?openid=${openid}",
                type: "POST",
                data: form,
                processData: false,
                contentType: false,
                async: false,
                cache: false,
                success: function (data) {
                    var tmp = $.parseJSON(data);
                    console.log(tmp);
                    if (tmp.msg === 3) {
                        alert("修改成功");
                    } else if (tmp.msg === 2) {
                        alert("修改失败");
                    } else if (tmp.msg === 1) {
                        alert("增加成功");
                    } else if (tmp.msg === 0) {
                        alert("增加失败");
                    }
                    var modifyClass = document.getElementById('modal-container');
                    modifyClass.setAttribute('style', 'display:none');
                    window.location.reload();
                },
                error: function (e) {
                    alert("错误！！");
                }
            });
        }

    });
    $(".close").click(function () {
        var modifyClass = document.getElementById('modal-container');
        modifyClass.setAttribute('style', 'display:none');
    });

    function check(value) {
        //判断商品价格
        var reg = /(^[-+]?[1-9]\d*(\.\d{1,2})?$)|(^[-+]?[0]{1}(\.\d{1,2})?$)/;
        if (value == " ") {
            alert("商品价格不能为空！ ");
            return false;
        } else {
            if (!reg.test(value)) {
                alert("市场价格必须为合法数字(正数，最多两位小数)！ ");
                return false;
            } else {
                return true;
            }
        }
    }
</script>
<style>
    body {
        position: relative;
        height: 1314px;
        width: 100%;
    }

    #modal-container {
        position: absolute;
        top: 0;
        background: rgba(7, 17, 27, 0.5);
        width: 100%;
        height: 100%;
    }
</style>
</body>

</html>